<template>
    
    <div class="app-container">
         <!-- 面包屑导航区域 -->
        <el-breadcrumb separator="/">
          <!-- <el-breadcrumb-item><a>用户管理</a></el-breadcrumb-item> -->
          <el-button type="warning" plain icon="el-icon-close" size="mini" @click="closeViewHandler">返回</el-button>
        </el-breadcrumb>
        <el-row :gutter="20">
            <el-col :span="6" :xs="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>个人信息</span>
                    </div>
                    <div>
                        <div style="text-align:center">
                            <!-- <div class="headStyle" :style="{ backgroundImage: 'url('+headUrl+')' }">
                            </div> -->
                            <el-image
                                style="width: 120px; height: 120px"
                                :src="headUrl"
                                fit="fill"></el-image>
                             <div style="margin-top: 20px;">
                                 <el-upload
                                         class="upload-demo"
                                         action="#"   
                                         :http-request="customUpload"
                                        >
                                        <el-button size="small" type="primary">点击上传</el-button>
                                  </el-upload>
                             </div>
                        </div>
                         
                        <div class="text-center">
                        </div>
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item">
                                用户名称
                                <div class="pull-right">{{ user.userName }}</div>
                            </li>
                            <li class="list-group-item">
                               手机号码
                                <div class="pull-right">{{ user.phonenumber }}</div>
                            </li>
                            <li class="list-group-item">
                                用户邮箱
                                <div class="pull-right">{{ user.email }}</div>
                            </li>
                            <!-- <li class="list-group-item">
                                所属部门Id
                                <div class="pull-right">{{  user.deptId }}</div>
                            </li> -->
                            <li class="list-group-item">
                                用户类型
                                
                                <div class="pull-right">
                                    <span v-if="user.userType === '00'">系统用户</span>
                                    <span v-if="user.userType==='01'">业务用户</span>
                                </div>
                            </li>
                            <li class="list-group-item">
                                性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别
                                <div class="pull-right">
                                    <span v-if="user.sex=='0'">男</span>
                                    <span v-if="user.sex=='1'">女</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="18" :xs="24">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>基本资料</span>
                    </div>
                    <el-tabs v-model="activeTab">
                        <el-tab-pane label="基本资料" name="userinfo">
                            <el-form ref="infoForm" :model="users" :rules="ruless" label-width="80px">
                                <el-form-item label="用户昵称" prop="userName">
                                <el-input v-model="users.userName" maxlength="30" />
                                </el-form-item> 
                                <el-form-item label="手机号码" prop="phonenumber">
                                <el-input v-model="users.phonenumber" maxlength="11" />
                                </el-form-item>
                                <el-form-item label="邮箱" prop="email">
                                <el-input v-model="users.email" maxlength="50" />
                                </el-form-item>
                                <el-form-item label="性别">
                                <el-radio-group v-model="users.sex">
                                    <el-radio label="0">男</el-radio>
                                    <el-radio label="1">女</el-radio>
                                </el-radio-group>
                                </el-form-item>
                                <el-form-item>
                                <el-button type="primary" size="mini" @click="submitInfo">保存</el-button>
                                <el-button type="danger" size="mini" @click="closeViewHandler">关闭</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="修改密码" name="resetPwd">
                            <el-form ref="form" :model="updatePassword" :rules="rules" label-width="80px">
                                <el-form-item label="旧密码" prop="oldPassword">
                                <el-input v-model="updatePassword.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
                                </el-form-item>
                                <el-form-item label="新密码" prop="newPassword">
                                <el-input v-model="updatePassword.newPassword" placeholder="请输入新密码" type="password" show-password/>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="confirmPassword">
                                <el-input v-model="updatePassword.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
                                </el-form-item>
                                <el-form-item>
                                <el-button type="primary" size="mini" @click="submit">保存</el-button>
                                <el-button type="danger" size="mini" @click="closeViewHandler">关闭</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>

export default {
    name: "Profile",
    data() {
        const equalToPassword = (rule, value, callback) => {
            if (this.updatePassword.newPassword !== value) {
                callback(new Error("两次输入的密码不一致"));
            } else {
                callback();
            }
        };
        return {
             // 是否显示弹出层
            open: false,
            // 是否显示cropper
            visible: false,
            // 弹出层标题
            title: "修改头像",
            options: {
                // img: store.getters.avatar, //裁剪图片的地址
                autoCrop: true, // 是否默认生成截图框
                autoCropWidth: 200, // 默认生成截图框宽度
                autoCropHeight: 200, // 默认生成截图框高度
                fixedBox: true, // 固定截图框大小 不允许改变
                outputType: "png" // 默认生成截图为PNG格式
            },
            previews: {},
            resizeHandler: null,
            user: {},
            users: {
                userName:JSON.parse(sessionStorage.getItem("userdata")).userName,
                email:JSON.parse(sessionStorage.getItem("userdata")).email,
                phonenumber:JSON.parse(sessionStorage.getItem("userdata")).phonenumber,
                sex:JSON.parse(sessionStorage.getItem("userdata")).sex,
            },
            updatePassword: {
                oldPassword: undefined,
                newPassword: undefined,
                confirmPassword: undefined
            },
            roleGroup: {},
            postGroup: {},
            activeTab: "userinfo",
             // 表单校验
            rules: {
                oldPassword: [
                    { required: true, message: "旧密码不能为空", trigger: "blur" }
                ],
                newPassword: [
                    { required: true, message: "新密码不能为空", trigger: "blur" },
                    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
                ],
                confirmPassword: [
                    { required: true, message: "确认密码不能为空", trigger: "blur" },
                    { required: true, validator: equalToPassword, trigger: "blur" }
                ]
            },
            ruless: {
                userName: [
                    { required: true, message: "用户昵称不能为空", trigger: "blur" }
                ],
                email: [
                    { required: true, message: "邮箱地址不能为空", trigger: "blur" },
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: ["blur", "change"]
                    }
                ],
                phonenumber: [
                    { required: true, message: "手机号码不能为空", trigger: "blur" },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ]
            },
            headUrl: '',
            fileList:[],
            uploadUrl: '/api/upload',
            loginName: '',
            avatarId:''
        };
    },
    created() {
        this.user = JSON.parse(sessionStorage.getItem("userdata"))
        this.loginName = JSON.parse(sessionStorage.getItem("user")).loginName
        this.headUrl=JSON.parse(sessionStorage.getItem("userdata")).avatar.url
    },
    methods: {
        // 修改密码
        submit() {
            this.$refs['form'].validate(async valid => {
                if (valid) {
                      const { data: res } = await this.$http.post('/sys-user/updatePassword', {
                        oldPassword: this.updatePassword.oldPassword,
                        newPassword: this.updatePassword.newPassword})
                    if (res.code === 20000) {
                        this.$message.success(`修改成功!请重新登录!`)
                        this.$router.push('/login')
                    } else {
                        this.$message.error(res.msg)
                    }
                }
            })
        },
        // 修改用户信息
        submitInfo() {
            this.$refs['infoForm'].validate(async valid => {
                if (valid) {
                const { data: res } = await this.$http.post('/sys-user/update', {
                    deptId: this.user.deptId,
                    loginName: this.loginName,
                    userId:this.user.userId,
                    userName: this.users.userName,
                    email: this.users.email,
                    phonenumber:this.users.phonenumber,
                    avatar:this.avatarId
                })
                    if (res.code === 20000) {
                    this.$message.success(`修改成功!`)
                    this.$router.push('/login')
                } else {
                    this.$message.error(res.msg)
                }
            }
        })
        },
        // 关闭
        closeViewHandler() {
            this.$router.push('/home')
        },
        // 刷新组件
        refresh() {
            this.$refs.cropper.refresh();
        },
        // 上传图片
        // async uploadImg(imageId) {
        //     const { data: res } = await this.$http.get(`/system/sys-user-image/uploadImage?imageId=${imageId}`)
        //         if (res.code === 20000) {
        //             this.$message.success(`修改成功!`);
        //             this.closeViewHandler()
        //         } 
        // },
       
        handleUpload() {
            // 触发上传事件
            this.$refs.upload.submit();
        },
        async customUpload(file) {
            const { data: res } = await this.$http.put('/sys-file/upload', {file:file.file},{
                headers: {
                 'content-type': "multipart/form-data" 
                }
            })
            if (res.data) {
            this.headUrl = res.data.url;
            this.avatarId = res.data.fileId;
            }
        },
        // 实时预览
        realTime(data) {
            this.previews = data;
        },
    }
};
</script>

<style scoped>
.pull-right {
    display: inline-block;
    margin-left: 20px;
}
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}

.user-info-head:hover:after {
  content: '+';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
}
.headStyle {
  margin:0 auto;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  border: 1px solid pink;
  /* background-color: pink; */
  /* background: url(); */
}
.list-group{
    list-style: none;
    font-size: 14px;
}
.list-group-item{
    width: 248px;
}
</style>